<script>
import {editSpecsRows, totalValue} from "@/views/modals/specsRows.config";
import request from "@/utils/request";
import {message} from "ant-design-vue";

export default {
  name: "editSpecsModal",
  data() {
    return {
      dialogFormVisible: false,
      editSpecsRows,
      modalTitle: '',
      labelCol: { span: 5 },
      wrapperCol: { span: 19 },
      form: {
        id: '',
        nonDM: { price: 0, note: '' },
        royalty_sw: { price: 0, note: '' },
        mva: { price: 0, note: '' },
        logistics: { price: 0, note: '' },
        quallty: { price: 0, note: '' },
        tooling_scrap: { price: 0, note: '' },
        baseUnit: { price: 0, note: '' },
        me_cmf: { price: 0, desc: '', note: '' },
        rf: { price: 0, desc: '', note: '' },
        nfc: { price: 0, desc: '', note: '' },
        wifi: { price: 0, desc: '', note: '' },
        dp: { price: 0, desc: '', note: '' },
        audio: { price: 0, desc: '', note: '' },
        charging: { price: 0, desc: '', note: '' },
        wlc: { price: 0, desc: '', note: '' },
        pkg: { price: 0, desc: '', note: '' },
        ip: { price: 0, desc: '', note: '' },
        acc: { price: 0, desc: '', note: '' },
        sensors: { price: 0, desc: '', note: '' },
        roBU: { price: 0, desc: '', note: '' },
        chipset: { price: 0, desc: '', note: '' },
        memory: { price: 0, desc: '', note: '' },
        charger: { price: 0, desc: '', note: '' },
        battery: { price: 0, desc: '', note: '' },
        display1: { price: 0, desc: '', note: '' },
        display2: { price: 0, desc: '', note: '' },
        cam1: { price: 0, desc: '', note: '' },
        cam2: { price: 0, desc: '', note: '' },
        cam3: { price: 0, desc: '', note: '' },
        cam4: { price: 0, desc: '', note: '' },
        cam5: { price: 0, desc: '', note: '' },
        fCam1: { price: 0, desc: '', note: '' },
        fCam2: { price: 0, desc: '', note: '' },
        fps: { price: 0, desc: '', note: '' },
        android: '',
        od: '',
        handbook: '',
        notes: '',
      }
    }
  },
  methods: {
    show(data) {
      this.modalTitle = data.projectName + ' Specs Edit'
      Object.keys(this.form).forEach(key => {
        if (data[key]) {
          this.form[key] = data[key]
        }
      })

      this.handlePriceChange()

      this.dialogFormVisible = true
    },
    handleOk() {
      const params = { ...this.form }
      delete params.baseUnit
      request({
        url: '/specs/update',
        method: 'post',
        data: params
      }).then(res => {
        if (res.code === 200) {
          message.success('update success')
          this.dialogFormVisible = false
        } else {
          message.warning('update fail')
        }
      })
    },
    handlePriceChange(field) {
      if (field) {
        this.form[field].price = parseFloat(Number(this.form[field].price).toFixed(2))
      }

      this.form.nonDM.price = 0
      totalValue.nonDm.forEach(field => {
        this.form.nonDM.price += this.form[field].price || 0
      })
      this.form.nonDM.price = parseFloat(Number(this.form.nonDM.price).toFixed(2))
      this.form.baseUnit.price = 0
      totalValue.baseUnit.forEach(field => {
        this.form.baseUnit.price += this.form[field].price || 0
      })
      this.form.baseUnit.price = parseFloat(Number(this.form.baseUnit.price).toFixed(2))
    }
  }
}

</script>

<template>
  <a-modal v-model:open="dialogFormVisible" width="42vw" :title="modalTitle" @ok="handleOk" style="top: 0px">
    <a-form :model="form" ref="formRef">
      <a-form-item v-for="item in editSpecsRows" :key="item.field" :name="item.field" :label-col="labelCol" :wrapper-col="wrapperCol">
        <template #label>
          <div :class="item.children ? 'edit-specs-children-label' : 'edit-specs-label'">{{ item.label }}</div>
        </template>
        <div v-if="!item.isText" class="edit-specs-row">
          <a-input-number v-model:value="form[item.field].price" :min="0" size="small" :step="0.1" style="width: 18%; text-align: right;" :disabled="item.disabled"
                          @change="handlePriceChange(item.field)"/>
          <a-input v-if="!item.noDesc" v-model:value="form[item.field].desc" size="small" style="width: 44%;margin-left: 1%;"/>
          <a-input v-model:value="form[item.field].note" size="small" style="width: 36%;margin-left: 1%;"/>
        </div>
        <a-input v-else v-model:value="form[item.field]" style="width: 100%;" size="small"/>
      </a-form-item>
      <a-textarea v-model:value="form.notes" type="textarea" style="width: 100%;margin-top: 5px;" />
    </a-form>
  </a-modal>
</template>

<style scoped lang="scss">
.edit-specs-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  ::v-deep .ant-input-number-input{
    text-align: right;
    padding-right: 32px;
  }
  ::v-deep .ant-input-number-input[disabled] {
    background: #fff;
    color: #000;
    font-weight: 600;
  }
}
.edit-specs-label{
  text-align: left;
}
.edit-specs-children-label{
  color: #999;
  padding-right: 10px;
}
.ant-form-item{
  margin-bottom: 2px;
  height: 24px;
}
::v-deep .ant-form-item-label label{
  width: 100%;
  &::after{
    display: none;
  }
  div{
    width: 100%;

  }
}
</style>
